<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title>Purple Admin</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../../vendors/iconfonts/mdi/css/materialdesignicons.min.css"/>
    <link rel="stylesheet" href="../../vendors/css/vendor.bundle.base.css"/>
    <!-- endinject -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../../css/style.css"/>
    <!-- endinject -->
    <link rel="shortcut icon" href="../../images/favicon.png"/>
    <style type="text/css">
        #Conframe {
            border: none;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="showTbody">
    <div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <i class="mdi mdi-home menu-icon"></i>首页/系统管理/操作日志
        </div>
        <div class="card-body">
            <h4 class="card-title"><i class="mdi mdi-format-list-bulleted menu-icon"></i>数据列表</h4>

            <div>
                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon" style="text-align: center;line-height: 34px">操作人员:</div>&emsp;
                            <!--下拉所有员工-->
                            <select id="selectEId" class="form-control col-md-6">
                                <option value="0">全部</option>
                                <option th:each="emp:${allEmp}" th:selected="${selEId+'' eq emp.eId+''}"
                                        th:text="${emp.empName}" th:value="${emp.eId}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon" style="text-align: center;line-height: 34px">选择日期:</div>&emsp;
                            <input class="form-control col-md-6" th:value="${startTime}" placeholder="请选择日期"
                                   type="text" id="startTime"/>
                        </div>
                    </div>
                    &emsp;&emsp;
                    <button onclick="qryEmpBy()" type="button" class="btn btn-primary btn-sm">查询</button>
                    &emsp;&emsp; &emsp;&emsp; &emsp;&emsp; &emsp;&emsp;
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control col-md-8" placeholder="选择删除日期"
                                   type="text" id="delTime"/>
                        </div>
                    </div>
                    <button onclick="delByTime()" type="button" class="btn btn-danger btn-sm">删除</button>
                </form>
            </div>

            <!--登录日志列表列表-->
            <table class="table table-bordered">
                <thead>
                <tr class="table-danger">
                    <th>
                        编号
                    </th>
                    <th>
                        操作人
                    </th>
                    <th>
                        操作时间
                    </th>
                    <th>
                        操作类型
                    </th>
                    <th>
                        操作日志
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="log:${logs}">
                    <td th:text="${log.logId}"></td>
                    <td th:text="${log.currentUserName}"></td>
                    <td th:text="${log.timeStr}"></td>
                    <td th:text="${log.type}"></td>
                    <td th:text="${log.logColumns}"></td>
                </tr>
                </tbody>
            </table>
            <!--/登录日志列表列表-->
            <br/>
            <div class="text-right">
                <p>
                    当前 <span id="cPage" th:text="${pageInfo.pageIndex}"></span> 页,总 <span id="totalPage"
                                                                                          th:text="${pageInfo.totalPageCount}"></span>
                    页,共 <span id="totalCount" th:text="${pageInfo.totalCount}"></span> 条记录
                </p>
                <a href="JavaScript:void(0);" onclick="first(1)">首页</a>&emsp;
                <a href="JavaScript:void(0);" id="per" onclick="per()">上一页</a>&emsp;
                <span th:text="${pageInfo.pageIndex}" style="color: red"></span>&emsp;
                <a href="JavaScript:void(0);" id="next" onclick="next()">下一页</a>&emsp;
                <a href="JavaScript:void(0);" onclick="last()">末页</a>
                <div class="nav-item dropdown">
                    <a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#"
                       data-toggle="dropdown" aria-expanded="true">
                        请选择
                    </a>
                    <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list"
                         aria-labelledby="messageDropdown">
                        <li th:each="int:${pageArr}"><a th:text="${int}" href="JavaScript:void(0)" name="pageTo"
                                                        class="dropdown-item preview-item"></a></li>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--jquery-->
    <script src="../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <!-- plugins:js -->
    <script src="../../vendors/js/vendor.bundle.base.js"></script>
    <script src="../../vendors/js/vendor.bundle.addons.js"></script>
    <!-- endinject -->
    <!-- Plugin js for this page-->
    <!-- End plugin js for this page-->
    <!-- inject:js -->
    <script src="../../js/off-canvas.js"></script>
    <script src="../../js/misc.js"></script>
    <!-- endinject -->
    <!-- Custom js for this page-->
    <script src="../../js/dashboard.js"></script>
    <!--选择日期-->
    <script th:src="@{/laydate/laydate.js}"></script>
    <!-- End custom js for this page-->
    <script type="text/javascript">
        $('.dropdown-toggle').dropdown();

        laydate.render({
            elem: '#startTime',//指定元素
            format: 'yyyy-MM-dd'
        });
        laydate.render({
            elem: '#delTime', //指定元素
            format: 'yyyy-MM-dd'
        });

        //根据日期删除日志
        function delByTime() {
            var delTime = $("#delTime").val();
            $.ajax({
                "url":"/sLog/delByTime",
                "type":"get",
                "data": {"delTime":delTime},
                "dataType":"json",
                success:function (data) {
                    alert(data.msg);
                    window.location.href = "/sLog/getSLog";
                },
                error: function () {
                    alert("删除日志ajax异常")
                }
            });
        }


        //动态查询方法
        function qryEmpBy() {
            var eId = $("#selectEId").val();
            var startTime = $("#startTime").val();
            if (startTime == "") {
                startTime = "0";
            }
            ajaxPage(1, eId, startTime);
        }

        //跳首页
        function first(pageIndex) {
            var eId = $("#selectEId").val();
            var startTime = $("#startTime").val();
            if (startTime == "") {
                startTime = "0";
            }
            ajaxPage(pageIndex, eId, startTime);
        }

        //上一页
        function per() {
            var eId = $("#selectEId").val();
            var startTime = $("#startTime").val();
            if (startTime == "") {
                startTime = "0";
            }
            var pageIndex = $("#cPage").html();
            if (parseInt(pageIndex) === 1) {
                alert("已到首页");
                return;
            }
            ajaxPage(parseInt(pageIndex) - 1, eId, startTime);
        }

        //下一页
        function next() {
            var eId = $("#selectEId").val();
            var startTime = $("#startTime").val();
            if (startTime == "") {
                startTime = "0";
            }
            var pageIndex = $("#cPage").html();
            var totalPage = $("#totalPage").html();
            if (pageIndex === totalPage) {
                alert("已到尾页");
                return;
            }
            ajaxPage(parseInt(pageIndex) + 1, eId, startTime);
        }

        //末页
        function last() {
            var eId = $("#selectEId").val();
            var startTime = $("#startTime").val();
            if (startTime == "") {
                startTime = "0";
            }
            var pageIndex = $("#totalPage").html();
            ajaxPage(pageIndex, eId, startTime);
        }

        //分页ajax请求方法
        function ajaxPage(pageIndex, eId, startTime) {
            $.ajax({
                "url": "/sLog/getSLogBy",
                "type": "post",
                "data": {
                    "pageNum": pageIndex,
                    "eId": eId,
                    "startTime": startTime
                },
                "dataType": "text",
                success: function (data) {
                    window.location.href = data;
                    // $("#showTbody").load(data);
                },
                error: function () {
                    alert("分页ajax异常")
                }
            });
        }

        $(function () {
            //选择性跳页
            $("[name = pageTo]").click(function () {
                var eId = $("#selectEId").val();
                var startTime = $("#startTime").val();
                if (startTime == "") {
                    startTime = "0";
                }
                var $pageTo = $(this);
                var pageIndex = $pageTo.html();
                ajaxPage(pageIndex, eId, startTime);
            });

        });
    </script>
</div>
</body>

</html>
